<template>
  <div>
    <!-- 租房详情 -->
    <div class="content">
      <div class="rent">
        <h2>出租房屋</h2>
        <div>
          <span style="width:80rpx;height:80rpx;"><img style="margin-right:30rpx;width:80rpx;height:80rpx;border-radius: 50%;" :src="result.agent.prelogo" alt=""/></span>
          <span>{{ result.agent.cname }}
            <b style="color:#ccc;	font-size: 30rpx;">{{
              result.house.begintime
            }}</b>
          </span>
          <span style="color:#ccc;	font-size: 35rpx;">{{
            result.house.areaname
          }}</span>
          <span style="color:#ccc;	font-size: 35rpx;">{{
            result.house.catname
          }}</span>
          <span style="color:red;font-weight: 900;	font-size: 40rpx;"
            >{{ result.house.qzprice }} 元/月</span
          >
        </div>
      </div>
      <div class="target" style="padding-top: 40rpx;">
        <h2>目标区域</h2>
        <div class="map">
            <map
              :show-location="true"
              :markers="markers"
              :include-points="markers"
              @labeltap="labelTap"
            >
            </map>
        </div>
      </div>
      <div class="describe">
        <h2>求租描述</h2>
        <div>
          <span>{{ result.house.content }}</span>
          <span>联系我时，请说在宿迁房产网看到的信息，谢谢</span>
        </div>
      </div>
      <div class="Disclaimers">
        <div>
          <span>免责声明</span>
          <span style="font-size: 30rpx; border: 1rpx solid #ccc;">举报</span>
        </div>
        <div>{{ result.disclaimer }}</div>
      </div>
      <footer>
        <span @click="changeindex(index)"
            :class="tabindex == index ? 'active' : ''"><i class="iconfont icon-shoucang" style="font-size:60rpx; margin-top: -20rpx;padding-left: 20rpx;"></i>
              <i>收藏</i>
        </span>
        <div>
          <span style="background: rgb(235, 130, 130);margin:20rpx;" @click="chat()">在线咨询</span>
          <span style="background: rgb(74, 202, 241);margin:20rpx;" @click="tel()">电话咨询</span>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import "../../g_icon/rent/iconfont.css"
import { getConsult } from "../../server/index";
import { getRentDetail } from "../../mock/zuFang";
export default {
  data() {
    return {
      goodId: "",
      result: {}, 
      cityList: [],
      city: {},
      areaId: "",
      areaList: []
    };
  },
  watch: {
    areaId: {
      handler: async function (value) {
        if (value) {
          let result = await getConsult(
            `http://157.122.54.189:9060/area/map?id=${value}`
          );
          if (result.status == 200 && result.body.length) {
            this.areaList = result.body;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    markers() {
      return this.areaList.map((item, index) => {
        return {
          id: index,
          ...item.coord,
          label: {
            content: `${item.label}有${item.count}套房子`,
            color: "#fff",
            fontSize: 12,
            padding: 6,
            bgColor: "#70D298",
            textAlign: "center",
            borderRadius: 5,
          },
          width: 0,
          height: 0,
        };
      });
    },
  },
  async onLoad(option) {
    //option为object类型，会序列化上个页面传递的参数
    console.log(option.id); //打印出上个页面传递的参数。
    if (option.id) {
      this.goodId = option.id;
    }

    // 地图
    let city = await getConsult("http://157.122.54.189:9060/area/city?level=1");
    if (city.status == 200) {
      this.cityList = city.body;
      this.city = this.cityList[0];
      this.areaId = this.city.value;
    }
  },
  async onShow() {
    let result = await getRentDetail(this.goodId);
    this.result = result;
    console.log(this.result, "1234567");
  },

  methods: {
    //切换高亮
    changeindex(index) {
      this.tabindex = index;
    },
    cityChange(e) {
      this.city = this.cityList[e.target.value];
      this.areaId = this.cityList[e.target.value].value;
    },
    labelTap({ detail: { markerId } }) {
      this.areaId = this.areaList[markerId].value;
    },
    navlink(path) {
      console.log(path);
      uni.redirectTo({
        url: path,
      });
    },
    // 短信
    chat(){
      uni.navigateTo({
        url:'/pages/home/Renting/chat'
      })
    },
    //打电话
    tel() {
      let tel = this.details[0].brokerid;
      let res = String(tel);
      wx.makePhoneCall({
        phoneNumber: res,
        //拨打成功
        success: function (res) {
          console.log(res, "拨打成功");
        },
        //拨打失败
        fail: function (res) {
          console.log(res, "拨打失败");
        },
        //拨打结束
        complete: function (res) {
          console.log(res, "拨打结束");
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
h2 {
  font-size: 40rpx;
  font-weight: 900;
}
.content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  .rent{
    width: 95%;
    height: 250rpx;
    margin:0 auto;
    border-bottom: 1rpx solid #ccc;
    div{
      display: flex;
      justify-content: space-between;
      padding: 70rpx 0;
    }
  }
  .target{
    width: 95%;
    height: 450rpx;
    margin: 0 auto;
    .map{
      width: 100%;
      height: 350rpx;
      margin-top: 30rpx;
    }
  }
  .describe{
    width: 95%;
    margin: 0 auto;
    height: 200rpx;
    div>span{
      font-size: 30rpx;
      line-height: 70rpx;
    }
  }
  .Disclaimers{
    width: 95%;
    height: 350rpx;
    margin: 0 auto;
    margin-bottom: 80rpx;
    color: #ccc;
    >div:first-child{
      display: flex;
      justify-content: space-between;
      margin-bottom:30rpx;
    }
    >div:last-child{
      font-size: 32rpx;
      line-height: 60rpx;
    }
  }
}
  footer {
    width: 100%;
    height: 100rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    line-height: 100rpx;
    span{
      height: 100rpx;
      line-height: 100rpx;
    }
    div > span{
      width: 180rpx;
      height: 100rpx;
      display: inline-block;
      line-height: 100rpx;
      text-align: center;
    }
  }
</style>
